<ion-modal-view>
	<ion-header-bar class="bar bar-royal bar-header inter-head">
		<div class="col col-fixed text-center">
			<span class="col-item icon-label ion-navicon" ng-click="toggleCat()">分类</span>
		</div>
		<div class="col text-right" text-filter>
			<span class="col-item" ng-click="toggleFilter()">
				<span class="pull-left">全部商品</span>
				<i class="ion-funnel icon-right"></i>
			</span>
		</div>
	    <div class="buttons">
	      <button class="button button-icon button-close ion-ios-close-empty" ng-click="productsModal.hide()"></button>
	    </div>
    </ion-header-bar>

	<ion-scroll direction="y" class="sidebar has-header has-footer-large" ng-if="showCat">
	    <ion-list>
	        <ion-item ng-click="setFilter('')" class="">全部</ion-item>
	        <ion-item ng-repeat="(label,brand) in brandList" ng-click="setFilter(label)">
	        	{{label}}
	        	<span class="badge badge-light" ng-if="brand<=99">{{brand}}</span>
	        	<span class="badge badge-light" ng-if="brand>99">99+</span>
	        </ion-item>
	    </ion-list>
	</ion-scroll>

	<ion-content class="has-header has-footer-large">

		<div class="list accordion-list product-select-list">
			<div ng-repeat="product in products | filter:filter | orderBy:order" class="item item-thumbnail-left item-checkbox">
				<div class="row">
					<img ng-src="{{product.thumb}}" class="item-image"/>
					<div class="col">
						<h2 class="title">{{product.properties.brand.value + product.properties.model.value}}</h2>
						<div class="prop-list">
							<p ng-repeat="property in product.properties" class="prop-item" ng-if="property.name!='品牌' && property.name!='型号'">
								<span class="prop-label">{{property.name}}:</span>
								<span class="prop-value">{{property.value}}</span>
							</p>
							<p class="prop-item">库存：10{{ property.count }}部</p>
						</div>
						<label class="checkbox">
					       <input type="checkbox" ng-click="selectProduct(product)">
					    </label>
					</div>
					<div class="accordion-handle arrow right-bottom-arrow" ng-class="{on: isItemShown(product)}" ng-click="toggleItem(product)" ng-if="order.list.indexOf(product)>-1">
						<span class="item-count text-center padding assertive">{{product.count}}</span>
					</div>
				</div>
				<div class="item-accordion margin-left" ng-if="isItemShown(product)">
					<div class="list list-inset">
						<label class="item item-input">
							<span class="input-label">单价</span>
							<input type="number" ng-model="product.final_price" min="{{product.min_sale_price}}" ng-if="order.price_type=='零售'" required>
                            <input type="number" ng-model="product.final_price" ng-if="order.price_type=='亲情单'" required>
						</label>

						<span class="item item-input">
                            <span class="input-label">数量</span>
                            <button type="button" class="button button-icon icon ion-ios-minus" ng-class="{'stable':product.count==1,'balanced':product.count>1}" ng-click="minusCount(product)" ng-disabled="product.count<=1"></button>
                            <input type="number" ng-model="product.count" min="1" required>
                            <button type="button" class="button balanced button-icon icon ion-ios-plus" ng-click="addCount(product)"></button>
                        </span>
						<ion-item class="item item-base">
							<span class="input-label">小计</span>
							<span class="assertive">{{product.final_price * product.count | currency:'￥'}}</span>
						</ion-item>
					</div>
				</div>
			</div>
		</div>
	</ion-content>

  	<div class="bar bar-footer bar-dark footer-large">
		<div class="col">
			<div>已选：</div>
			<div class="assertive">{{order.list.length}}款 / {{order.total_count}}件</div>
		</div>
		<div class="col">
			<div>总额：</div>
			<div class="assertive">{{(order.amount | currency:'￥' )}}</div>
		</div>
		<div class="col col-center text-right">
			<a class="button button-radius button-balanced" ng-click="productsModal.hide();" ng-disabled="!order.amount">选好了</a>
		</div>
	</div>
</ion-modal-view>
